<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/pop-ups.css"><!--弹出层-->
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../css/comment.css"/><!--图标-->
    <title>直播</title>
    <style>
        body {
            background-color: white;
        }

        .video-live-head {
            height: 4.22rem;
            width: 7.5rem;
        }

        .video-live-img {
            min-height: 4.22rem;
        }

        .video-live-img img {
            width: 100%;
            height: 4.22rem;
        }

        .video-live-bg {
            top: 0;
            left: 0;
            width: 100%;
            height: 4.22rem;
            background-color: rgba(0, 0, 0, 0.75);
        }

        .video-live-desc {
            line-height: .56rem;
            margin-bottom: .16rem;
            color: #fff;
        }

        .video-live-countdown {
            color: #FF9E35;
        }

        .video-live-tab {
            border-bottom: 0.12rem solid transparent
        }

        .video-live-tab-active {
            color: #2C68FF;
            border-bottom: 0;
        }

        .video-live-tab-line {
            border-radius: 0.03rem;
            background-color: #2C68FF;
            width: 0.36rem;
            height: 0.06rem;
            margin-top: 0.06rem;
        }

        .video-live-tabs-wrap {
            height: 0.88rem;
            width: 100%;
            border-bottom: 0.02rem solid #f6f6f6;
        }

        .video-live-tabs {
            width: 4.78rem;
        }

        .video-live-mains {
            padding: 0.32rem 0.32rem 0.18rem 0.32rem;
            display: none;
        }

        .video-live-main {
            /*display: none;*/
        }


        .video-live-main-detail-title {
            color: #222222;
            line-height: 0.5rem;
        }

        .video-live-main-detail-flag {
            color: #FF9523;
            text-align: center;
            padding: 0.04rem 0.04rem;
            border-radius: 0.08rem;
            background: rgba(255, 149, 35, 0.12);
        }

        .video-live-main-detail-img {
            width: 0.44rem;
            height: 0.44rem;
        }

        .video-live-main-detail-img img {
            width: 100%;
            height: 100%;
            border-radius: 1rem
        }

        .video-live-main-detail-name {
            color: rgba(34, 34, 34, 0.7);
        }

        .video-live-main-detail-icon {
            color: #B9B9B9;
        }

        .video-live-main-detail-time {
            color: rgba(34, 34, 34, 0.45);
        }

        .video-live-main-view {
            color: rgba(34, 34, 34, 0.45);
            margin-top: 0.24rem;
        }

        .video-live-main-content {
            margin-top: 0.66rem;
        }

        .video-live-main-line {
            height: 0.32rem;
            width: 0.08rem;
            background-color: #FF9523;
        }

        .video-live-main-word {
            margin-left: 0.16rem;
        }

        .video-live-main-desc {
            margin-top: 0.24rem;
            color: rgba(34, 34, 34, 0.7);
            line-height: 0.48rem;
        }

        .video-live-main-video {
            margin-top: 0.64rem;
        }

        .comment-list-head {
            height: 0.6rem;
            width: 0.6rem;
        }

        .comment-list-head img {
            height: 100%;
            width: 100%;
            border-radius: 1rem;
        }

        .comment-list-user {
            color: #222222;
        }

        .comment-list-user-teacher {
            border-radius: 0.04rem;
            color: white;
            padding: 0 0.08rem;
            background: linear-gradient(270deg, rgba(194, 164, 38, 1) 0%, rgba(242, 213, 142, 1) 100%);
        }

        .comment-list-content {
            color: #222222;
            padding: 0.2rem 0.24rem;
            line-height: 0.42rem;
            background-color: white;
            border-radius: 0.08rem;
        }


        .comment-list-time {
            color: rgba(34, 34, 34, 0.45);
        }


        .comment-list-wrap {
            padding-bottom: 1rem;
        }

    </style>
</head>
<body>

<div class="flex-column ff400 fs14 h-100-p">
    <!--头部部分-->
    <div class="placeholder-top pos-a">
        <!--状态栏-->
        <div class="status-bar pos-f"></div>
        <!--标题栏-->
        <div class="nav-bar pos-f flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()" style="color: #FFFFFF;">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1"></div>
            <div class="right-bar">
            </div>
        </div>
    </div>

    <div class="video-live-head pos-r">
        <div class="video-live-img"><img src="" alt=""></div>
        <div class="video-live-bg flex-column justify-content-center align-items-center pos-a">
            <div class="video-live-desc ff400 fs18">直播倒计时</div>
            <div class="video-live-countdown fs26 ff500" id="head-type"></div>
        </div>
    </div>

    <!-- 详情,文档,评论 -->
    <div class="video-live-tabs-wrap flex-row justify-content-center">
        <div class="video-live-tabs flex-row align-items-center justify-content-between">
            <div class="video-live-tab flex-column ff500 align-items-center video-live-tab-active" onclick="changeTab(0)">
                <div>详情</div>
                <div class="video-live-tab-line"></div>
            </div>
            <div class="video-live-tab flex-column align-items-center" onclick="changeTab(1)">
                <div>文档</div>
            </div>
            <div class="video-live-tab flex-column align-items-center" onclick="changeTab(2)">
                <div>互动</div>
            </div>
            <div class="video-live-tab flex-column align-items-center" onclick="changeTab(3)">
                <div>提问</div>
            </div>
        </div>
    </div>
    <!--详情、文档、评论内容-->
    <!--详情-->
    <div class="video-live-mains flex-column flex-1 scoll-y" style="display:block">
        <div class="video-live-main video-live-main-detail">
            <div class="video-live-main-detail-title fs18 ff500 ">
                <span class="video-live-main-detail-flag mr5 fs12">直播中</span>
                <span>标标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题题</span>
            </div>
            <div class="flex-row mt10 justify-content-between align-items-center">
                <div class="flex-row align-items-center">
                    <div class="video-live-main-detail-img"><img src=""/></div>
                    <div class="video-live-main-detail-name ml5">姓名</div>
                </div>
                <div class="flex-row align-items-center">
                    <span class="video-live-main-detail-icon iconfont iconrili-01 fs12 mr5"></span>
                    <span class="video-live-main-detail-time">2020</span>
                </div>
            </div>
            <div class="video-live-main-view fs11">视频内容不代表智管有方观点，请您谨慎判断</div>
            <!--讲师简介-->
            <div class="video-live-main-content flex-column">
                <div class="video-live-js flex-row align-items-center">
                    <div class="video-live-main-line"></div>
                    <div class="video-live-main-word fs16 ff500">讲师简介</div>
                </div>
                <div class="video-live-main-desc">讲师简介讲师简介讲师简介讲师简介讲师简介讲师简介讲师简介讲师简介讲师简介讲师简介讲师简介讲师简介</div>
                <div class="video-live-main-video video-live-js flex-row align-items-center">
                    <div class="video-live-main-line"></div>
                    <div class="video-live-main-word fs16 ff500">视频亮点</div>
                </div>
                <div class="video-live-main-desc">视频亮点视频亮点视频亮点视频亮讲师简介讲师简介讲师简介讲师简介讲师简介讲师简介点视频亮点视频亮点</div>
            </div>
        </div>
    </div>
    <!--文档-->
    <div class="video-live-mains flex-column flex-1 scoll-y">
        <div class="video-live-main">文档</div>
    </div>
    <!--评论-->
    <div class="video-live-mains flex-column flex-1 scoll-y" style="background-color: #F7F7F7;">
        <div class="video-live-main">
            <div class="video-live-main-comment video-live-main-comment-content">
                <div class="comment-list-wrap">
                    <div class="comment-list-item flex-row pb30">
                        <div class="comment-list-head mr10"><img src="http://test.storage.jd.com/jtzx/d4dea7d2-d277-4e1a-9778-fb91f6f69749.jpg"/></div>
                        <div class="flex-column flex-1">
                            <div class="flex-row align-items-center">
                                <div class="comment-list-user fs13 ff500">手机用户</div>
                                <div class="fs12 ml5 comment-list-time">20:15</div>
                            </div>
                            <div class="flex-row">
                                <div class="comment-list-content fs15 mt10 mr20">内容内容撒娇哦i是建瓯市骄傲</div>
                            </div>
                        </div>
                    </div>

                    <div class="comment-list-item flex-row pb30">
                        <div class="comment-list-head mr10"><img src="http://test.storage.jd.com/jtzx/d4dea7d2-d277-4e1a-9778-fb91f6f69749.jpg"/></div>
                        <div class="flex-column flex-1">
                            <div class="flex-row align-items-center">
                                <div class="comment-list-user fs13 ff500">手机用户</div>
                                <div class="fs12 ml5 comment-list-time">20:15</div>
                            </div>
                            <div class="flex-row">
                                <div class="comment-list-content fs15 mt10 mr20">阿动电动机东莎哦i阿动电动机东金萨动电动机东杀手的hi的活动电动机东京哦</div>
                            </div>
                        </div>
                    </div>


                    <div class="comment-list-item flex-row pb30">
                        <div class="comment-list-head mr10"><img src="http://test.storage.jd.com/jtzx/d4dea7d2-d277-4e1a-9778-fb91f6f69749.jpg"/></div>
                        <div class="flex-column flex-1">
                            <div class="flex-row align-items-center">
                                <div class="comment-list-user fs13 ff500"><span class="comment-list-user-teacher fs12 ff400 mr5">讲师</span>手机用户</div>
                                <div class="fs12 ml5 comment-list-time">20:15</div>
                            </div>
                            <div class="flex-row">
                                <div class="comment-list-content fs15 mt10 mr20">内容内容撒娇哦i是建瓯市骄傲</div>
                            </div>
                        </div>
                    </div>

                    <div class="comment-list-item flex-row pb30 flex-direction-row">
                        <div class="comment-list-head"><img src="http://test.storage.jd.com/jtzx/d4dea7d2-d277-4e1a-9778-fb91f6f69749.jpg"/></div>
                        <div class="flex-column flex-1">
                            <div class="flex-row align-items-center flex-direction-row mr10">
                                <div class="fs12 ml5 comment-list-time">20:15</div>
                                <div class="comment-list-user fs13 ff500">手机用户</div>
                            </div>
                            <div class="flex-row flex-direction-row">
                                <div class="comment-list-content fs15 mt10 mr5">内容内容撒娇哦i是建瓯市骄傲</div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>

    </div>

    <div class="comment-area" style="display: none">
    </div>

</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>

<script>
  let pm = {
    isScroll: false,
    pageNum: 1,
    pageSize: 10,
    infoId:'',
    videoStatus: 2 //1、直播未开始  2、直播中  3 、直播已结束
  }

  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()
    pm.infoId = params.infoId

    getTrainingInfoByInfoId()

  }

  function getTrainingInfoByInfoId(){
    Server.videoLive.selectTrainingInfoByInfoId({
      infoId:pm.infoId
    }).then(function (data) {

      //  当前时间>= 直播开始时间，则是直播中，
      if (DateUtils.getDttm() >= data.trainingInfo.trainStartDttm) {
        pm.videoStatus = 2
      }else{
        //设置倒计时
        Template.countTime(data.trainingInfo, 'head-type', '00:00')
        pm.videoStatus = 1
      }
      initVideo()
      $('.video-live-img img').attr('src',data.trainingInfo.coverImgUrl)
      $('.video-live-main-detail-title span').eq(1).text(data.trainingInfo.mainTitle)
      $('.video-live-main-detail-img img').attr('src',data.trainingInfo.lecturerHead)
      $('.video-live-main-detail-name').html(data.trainingInfo.lecturer)
      $('.video-live-main-detail-time').text(data.trainingInfo.issuerDttmStr)
      if(data.trainingInfo.lecturerIntroduction){
        $('.video-live-main-desc').eq(0).html(data.trainingInfo.lecturerIntroduction)
      }else{
        $('.video-live-js').eq(0).hide()
      }
      if(data.trainingInfo.courseIntroduction){
        $('.video-live-main-desc').eq(1).html(data.trainingInfo.courseIntroduction)
      }else{
        $('.video-live-js').eq(1).hide()
      }

    })
  }

  function initVideo() {
    $('.comment-area').html(Template.commentDetail(1, 1, 1, 1))
    if(pm.videoStatus === 1){
      $('.video-live-main-detail-flag').html('未开始')
    }
  }

  //切换详情，文档，互动
  function changeTab(num) {
    $('.video-live-tabs .video-live-tab').removeClass('video-live-tab-active ff500')
    $('.video-live-tabs .video-live-tab .video-live-tab-line').remove()
    $('.video-live-tabs .video-live-tab').eq(num).addClass('video-live-tab-active ff500')
    $('.video-live-tabs .video-live-tab').eq(num).append('<div class=\'video-live-tab-line\'></div>')
    $('.video-live-mains').hide()
    $('.video-live-mains').eq(num).show()
    if (2 === num) {
      $('.comment-area').show()
    } else {
      $('.comment-area').hide()
    }

  }


  function showInput(v) {
    if (v === 0) {//取消发布
      $('.comment-show').hide()
    } else if (v === 1) { //发布评论
      if (Utils.emojiJudge($('.comment-content').val())){
        // 不允许输入表情
        jsBridge.callBridge('toast', {msg: '请勿输入表情'})
        return
      }else if ($('.comment-content').val() && $('.comment-content').val().trim()) {//如果有内容，则添加评论
        showInput(0)
      } else {//弹出内容不能为空
        jsBridge.callBridge('toast', {msg: '评论不能为空'})
      }
    }
  }

  function writeComment() {
    $('.comment-show').show()
    $('.comment-content').focus()
  }


</script>
</html>
